import React from 'react'
import IconMap from '../IconMap';
import Style from "./index.css"
import { useHistory, useDispatch } from "umi";
import defaultAvatart from "@/common/img/default_avatar.jpg"
export default function BaseHeaderBar({ Header, CollArrow, changeArrow, Dropdown, Avatar }) {
    const users = JSON.parse(localStorage.getItem("userProfile"));
    const history = useHistory();
    const dispatch = useDispatch();
    // 退出操作
    const SignOut = () => {
        localStorage.clear();
        dispatch({ type: "user/removeUser" })
        history.push("/users/login");
    }
    const items = [{
        label: (
            <div style={{
                width: "115px",
                padding: "10px 5px",
                fontSize: "15px"
            }} onClick={SignOut}>
                {IconMap.signOut} <span>退出</span>
            </div>
        ),
        key: "123"
    }];

    return (
        <Header  >
            <div className='button' onClick={changeArrow}>
                {CollArrow ? IconMap.rightArrow : IconMap.leftArrow}
            </div>
            <Dropdown
                className={Style.menu}
                menu={{
                    items
                }}>
                <div >
                    <span style={{
                        margin: "0 15px"
                    }}>{users.userName}</span>
                    <Avatar src={defaultAvatart}></Avatar>
                </div>
            </Dropdown>
        </Header>
    )
}
